<template>
    <div class="wrapper">
      <div class="header">
        <span class="title">{{ title }}</span>
        <!-- <el-upload
          class="upload-demo"
          :action="uploadUrl"
          multiple
          :show-file-list="false"
          :on-success="handleSuccess"
          :on-error="handleError"
        >
          <el-button size="mini" plain>导入确认采购单</el-button>
        </el-upload> -->
      </div>
      <div class="tag-list">
        <span
          v-for="tag in tagList"
          :key="tag.anchor"
          class="tag-item"
          :class="[active == tag.anchor ? 'active' : '']"
          @click="handleJump(tag)"
          >{{ tag.label }}</span
        >
      </div>
    </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "测试"
    },
    uploadUrl: {
      type: String,
      default: "/api/purchases/excel"
    },
    active:{
      type: String,
      default:"#one"
    },
    tagList: {
      type: Array,
      default: () => {
        return [
          {
            label: "基本信息",
            anchor: "#one"
          },
          {
            label: "货品明细",
            anchor: "#two"
          }
          /* {
            label: "批次信息",
            anchor: "#three"
          },
          {
            label: "系统日志",
            anchor: "#four"
          } */
        ];
      }
    }
  },
  methods: {
    // 导入后 成功&失败 回调
    handleSuccess(res) {
      this.$message({
        message: "导入成功！",
        type: "success",
        offset: 100
      });
    },
    handleError(err) {
      this.$message({
        message: "导入失败！",
        type: "error",
        offset: 100
      });
    },
    handleJump(tag) {
      this.$emit('toTarget', tag.anchor)
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  position: fixed;
  top: 66px;
  left: 184px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 6px 12px 0 #ccc;
  z-index: 5;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #ccc;
    .title {
      font-size: 20px;
    }
  }
  .tag-list {
    display: flex;
    align-items: center;
    .tag-item {
      width: 80px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      padding: 0 10px;
      cursor: pointer;
      &:hover {
        border-bottom: 2px solid #00c900;
        color: #00c900;
      }
    }
    .active {
      border-bottom: 2px solid #00c900;
      color: #00c900;
    }
  }
}
</style>
